<template>
  <div>
    <el-form>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="预估工时">
            <el-input class="input" type="text" v-model="curFormData.Tasktime" @mouseover="sGsMouseover"
                      @focus="sGsMouseover" @mouseleave="sGsMouseleave" @blur="sGsMouseleave"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="已登记工时">
            <el-input class="input" type="text" readonly
                      v-model="allTime"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="剩余工时">
            <el-input class="input" type="text" @mouseover="sGsMouseover" @focus="sGsMouseover" @mouseleave="sGsMouseleave"
                      v-model="syGs" placeholder="请输入剩余工时" @blur="sGsMouseleave" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工时进度">
            <el-progress :percentage="percentage"></el-progress>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="fujianclass">
      <span>共{{items.length}}个工时</span>
      <el-button type="text" style="font-size: 18px" @click="addWorkingHours"><i class="iconfont el-icon-folder-add"></i>&nbsp;添加工时</el-button>
    </div>
    <div>
      <ul class="infinite-list" style="overflow:auto">
        <li v-for="i in items" class="infinite-list-item">
          <div style="display: flex; padding: 10px 20px; align-items: center; color: darkgrey;">
<!--            <div style="width: 10%">tpc</div>-->
            <div style="width: 20%">{{ i.Userrealname }}</div>
            <div style="flex: 1">{{ i.Tasktime }}个小时</div>
            <div style="flex: 1">{{ timeToString(i.Started) }}</div>
            <div style="flex: 1">{{ timeToString(i.Ended) }}</div>
            <div style="flex: 1">工时认定：{{i.Cognizancetasktime}}</div>
            <div @click="rdgs(i)">认定工时</div>
<!--            <div @click="rdgs(i)" v-if="!i.Cognizancetasktime">认定工时</div>-->
<!--            <div v-else>已认定</div>-->
<!--            <el-dropdown @command="handleTags" trigger="click" class="editOpear" :class="{'showClass' : i.showClass}"-->
<!--                         @visible-change="visibleChange(i)">-->
<!--              <el-button type="text" style="font-size: 18px" title="更多">-->
<!--                <i class="iconfont el-icon-more"></i></el-button>-->
<!--              <el-dropdown-menu size="small" slot="dropdown">-->
<!--                <el-dropdown-item command="edit" style="width: 100px">编辑</el-dropdown-item>-->
<!--&lt;!&ndash;                <el-dropdown-item command="del" style="width: 100px">删除</el-dropdown-item>&ndash;&gt;-->
<!--              </el-dropdown-menu>-->
<!--            </el-dropdown>-->
          </div>
        </li>
      </ul>

    </div>
    <working-hours-add :visible.sync="workingHoursAddVisible" :formData="workingHoursItem" @saveSuccess="getWorkByTaskId"></working-hours-add>
  </div>
</template>

<script>
import workingHoursAdd from "./workingHoursAdd";
import projectTaskWorkApi from "@/api/projectTaskWorkApi";
import { formatDateString } from '@/utils/date';

export default {
  name: "workingHours",
  components: {
    workingHoursAdd
  },
  props: {
    formData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
    curFormData: {
      get () {
        return this.formData
      },
      set (val) {
        this.$emit('update:formData', val)
      }
    },
    allTime () {
      let a = this.items.filter(it => it.Tasktime).map(it => it.Tasktime)
      if (a && a.length > 0) {
        return a.reduce((a, b) => Number(a) + Number(b))
      } else {
        return  0
      }
    },
    // 剩余工时
    syGs () {
      let w = this.curFormData.Tasktime - this.allTime
      if (isNaN(w)) {
        return 0
      }
      return this.curFormData.Tasktime - this.allTime
    }
  },
  data () {
    return {
      percentage: 0,
      workingHoursAddVisible: false,
      items: [],
      workingHoursItem: {},
      sGs: '',
      v_sGs: '',
      selectItem: {}
    }
  },
  methods: {
    // 认定工时
    rdgs (row) {
      this.workingHoursItem = JSON.parse(JSON.stringify(row))
      this.workingHoursItem.Cognizancetasktime = this.workingHoursItem.Cognizancetasktime || this.workingHoursItem.Tasktime
      this.workingHoursAddVisible = true
    },
    percentageFun () {
      let a = 0
      if (this.curFormData.Tasktime) {
        a = this.allTime / this.curFormData.Tasktime
      }
      let b = (a.toFixed(2) * 100).toFixed(0)
      if (b >= 100) return this.percentage = 100
      if (b <= 0) return this.percentage = 0
      this.percentage = Number(b)
    },
    //
    timeToString (time, format = 'yyyy-MM-dd hh:mm:ss') {
      if (time === 0) return ''
      if (time.toString().length === 10) {
        time = time * 1000
      }
      return formatDateString(time, format)
    },
    handleTags (tags) {
      if (tags === 'edit') {
        this.addWorkingHours()
      } else {
        this.delWorkingHours()
      }
    },
    sGsMouseleave () {
      this.v_sGs = this.sGs
      this.sGs = `${this.sGs}小时`
    },
    sGsMouseover () {
      this.sGs = `${this.v_sGs}`.replace('小时', '')
    },
    addWorkingHours () {
      this.workingHoursItem = {
        Taskid: this.curFormData.Id,
        Surplustasktime: this.syGs,
        Tasktime: this.selectItem.Tasktime
      }
      this.workingHoursAddVisible = true
    },
    // 删除
    delWorkingHours () {

    },
    // 活跃
    visibleChange (a) {
      this.$set(a, 'showClass', !a.showClass)
      this.selectItem = a
    },
    // 通过任务id获取工时
    getWorkByTaskId () {
      if (this.curFormData.Id) {
        projectTaskWorkApi.getById({ id: this.curFormData.Id }).then(re => {
          this.items = re.TaskTimes || []
          this.$nextTick(() => {
            // this.percentageFun()
          })
        })
      }
    },
    // 删除工时
    delWork (index) {
      projectTaskWorkApi.getById({ id: this.curFormData.Id }).then(re => {
      })
    }
  },
  watch: {
    'curFormData.Id': {
      immediate: true,
      deep: true,
      handler (n, o) {
        this.getWorkByTaskId(n)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.infinite-list {
  & .infinite-list-item {
    border-bottom: 1px solid #EEEEEE;
    & .editOpear {
      & .el-button--text {
        padding: 0;
      }
      &:not(.showClass) {
        display: none;
      }
    }
  }
  & .infinite-list-item:hover {
    background-color: #f2f2f2;
    cursor: pointer;
    & .editOpear {
      display: block;
    }
  }
}

.fujianclass {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  border-bottom: 1px solid #EEEEEE;
}

.input {
  font-size: 16px;
}
.input >>> .el-input__inner {
  padding: -1px;
  border: 0 solid #eef1f6;
  font-size: 16px;
  resize: none;
  color: #909399;
}
.input >>> .el-input__inner:hover {
  border: 1px solid #eef1f6;
  overflow: hidden;
}
.input >>> .el-input__inner:focus {
  border: 1px solid #eef1f6;
  overflow: hidden;
}
</style>